<template>
  <div class="vfor1">
    <ul>
      <!-- 永远不要把v-for v-if放在同一个元素上。即使不报错也不要这时候应该借助computetd提前处理源数据 -->
      <li
        v-for="(item, index) in titles"
        :key="index"
        :class="{active:index==currentIndex}"
        @click="itemClick(index)"
      >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Vfor1",
  props: {
    titles: {
      type: Array,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      users: [
        { id: 1, isActive: true, name: "zs" },
        { id: 2, isActive: false, name: "lis" },
        { id: 3, isActive: true, name: "ws" },
        { id: 4, isActive: false, name: "de" }
      ],
      currentIndex: 0
    };
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
      this.$emit("tabClick", index);
    }
  },
  components: {},
  computed: {
    activeUser() {
      return this.users.filter(el => el.isActive);
    }
  },
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.active {
  color: darkcyan;
}
</style>